<template>
  <section>
    <ul>
      <li v-for="(groupUser) in groupedUsers" :key="groupUser.category">
        <div ref="contactItem" class="contact-item">
          <div v-if="showCategoryLabel" class="label"
               :style="paddingStyle"
               v-bind:class="{sticky:enableCategoryLabelSticky}">
            <p>{{ groupUser.category.toUpperCase() }}</p>
          </div>
          <ul>
            <li v-for="(user) in groupUser.users" :key="user.uid">
              <tippy
                  v-if="!clickUserItemFunc"
                  :to="'user-' + user.uid"
                  interactive
                  theme="light"
                  :animate-fill="false"
                  placement="left"
                  distant="7"
                  animation="fade"
                  trigger="click"
                  :style="tippyStyleFix"
              >
                <UserCardView :user-info="user"/>
              </tippy>
              <div class="content"
                   :name="'user-'+user.uid"
                   :style="paddingStyle"
                   v-bind:class="{active: sharedContactState.currentFriend && user.uid === sharedContactState.currentFriend.uid}"
                   @click.stop="clickUserItem(user)">
                <img class="avatar" :src="user.portrait" alt="">
                <span
                    class="single-line"> {{ user._displayName }}</span>
              </div>

            </li>
          </ul>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import store from "@/store";
import UserCardView from "@/ui/main/user/UserCardView";

export default {
  name: "UserListVue",
  props: {
    users: {
      type: Array,
      required: true,
    },
    showCategoryLabel: {
      type: Boolean,
      required: false,
      default: true,
    },
    enableCategoryLabelSticky: {
      type: Boolean,
      required: false,
      default: false,
    },
    clickUserItemFunc: {
      type: Function,
      required: false,
    },
    paddingLeft: {
      type: String,
      required: false,
      default: '5px'
    }
  },
  data() {
    return {
      sharedContactState: store.state.contact,
    }
  },
  methods: {
    clickUserItem(user) {
      this.clickUserItemFunc && this.clickUserItemFunc(user);
    },

    scrollActiveElementCenter() {
      let el = this.$el.getElementsByClassName("active")[0];
      el && el.scrollIntoView({behavior: "instant", block: "center"});
    },

    tippyStyleFix() {
      let root = document.documentElement;
      root.style.setProperty('--tippy-right', '250px');
    },

    tippyStyleReset() {
      let root = document.documentElement;
      root.style.setProperty('--tippy-right', '0');
    }

  },

  mounted() {
    this.scrollActiveElementCenter();
    this.tippyStyleFix()

  },

  destroyed() {
    this.tippyStyleReset()
  },

  computed: {
    groupedUsers() {
      let groupedUsers = [];
      let current = {};
      this.users.forEach((user) => {
        if (user._category) {
          current = {
            category: user._category,
            users: [user],
          };
          groupedUsers.push(current);
        } else {
          current.users.push(user);
        }
      });
      return groupedUsers;
    },
    paddingStyle() {
      return {
        paddingLeft: this.paddingLeft
      }
    },
  },
  components: {
    UserCardView,
  },
}
</script>

<style lang="css" scoped>

.contact-item {
  --user-item-padding-left: 30px;
}

ul {
  list-style: none;
  width: 100%;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}

.checkbox {
  margin-right: 10px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  align-items: flex-start;
}

.contact-item .label {
  width: 100%;
  background-color: #fafafa;
}

.contact-item .label p {
  padding: 5px 5px 5px 0;
  border-bottom: 1px solid #e0e0e0;
}

.contact-item .label.sticky {
  position: sticky;
  top: 0;
}

.contact-item .content {
  padding: 5px 5px 5px 0;
  display: flex;
  width: 100%;
  align-items: center;
}

.contact-item .content span {
  margin-left: 10px;
}

.contact-item .content.active {
  background-color: #d6d6d6;
}

.contact-item .content:active {
  background-color: #d6d6d6;
}

/*.contact-item .content:hover {*/
/*  background-color: red;*/
/*}*/

</style>

<!--<style>-->
<!--.tippy-tooltip {-->
<!--  right: 250px !important;-->
<!--  border: 1px solid #f5f5f5 !important;-->
<!--  background-color: #fcfcfc !important;-->
<!--}-->
<!--</style>-->
